<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <style>
		#btn{width:100px;height:30px;line-height:30px;text-align:center;display:block;margin-bottom:20px;}
		#content_value,#output_value{
			width:25%;
			height:500px;
			float:left;
			margin-right:5%;
		}
		#content_value,#output_value{

			min-height:284px;
			resize:none;
		}
		.child{
			padding-left:20px;
			font-size:16px;
		}
		#myObj{
			width:30%;
			padding:10px 0;
			border:#ccc solid 1px;
			font-size:12px;
			/**min-height:485px;*/
			height:485px;
			float:left;
			overflow:scroll;
		}
		em{
		  font-style:normal;
		  color: #575757;
		  font-size: 12px;
		}
		.open{
		display:block;
		}
		.close{
		display:none;
		}
		
		</style>
    </head>
    <body> 
	<input type="button" value="格式化" onclick="check()" id='btn'>
	  <textarea id="content_value">
	  </textarea>
	  
	  <textarea id="output_value">
	  </textarea>
	  <div id="myObj"></div>
</body> 
<script type="text/javascript">
//判断是否为array
function isArray(o) {      
      return Object.prototype.toString.call(o) === '[object Array]';       
 }
function formatObject(name,o,num){
		//如果是对象，遍历属性
		var div="<div class='child close'>";
		var numObj="";
		if(!isNaN(num)){
			numObj="["+num+"]";
		}else{
			numObj=name+" : ";
		}

		var html =div+"<em class='obj' onClick=\"openOrClose(this)\">+对象"+numObj+"</em>";
		for(var prop in o){ 				
			var obj=o[prop];
			if(Object.prototype.toString.call(obj)==='[object Object]'){
				html+=formatObject(prop,obj,"str");
			}else if(isArray(obj)){
				html+=div+"<em class='arr' onClick='openOrClose(this)'>+数组</em> "+prop+"<em> : [</em>";
				for (var i=0;i<obj.length;i++){
					html+=formatObject(null,obj[i],i);
				}
				html+="<em>]</em></div>";
			}else{
			//不是对象，而是string ，直接插入
				html+=div+"<em class='prop'>-属性</em> "+prop+" : "+obj+"</div>";
			}
		}
		html+="</div>";
		return html;
	}
function check(){
　　var text_value = document.getElementById('content_value').value;
　　if(text_value == ""){
   　　alert("不能为空");  
   　　return false;
　　} else {
		
		var json=eval('(' + text_value + ')');

		text_value=JSON.stringify(json);
        var res="";
        for(var i=0,j=0,k=0,ii,ele;i<text_value.length;i++)
        {//k:缩进，j:""个数
            ele=text_value.charAt(i);
            if(j%2==0&&ele=="}")
            {
                k--;                
                for(ii=0;ii<k;ii++) ele="    "+ele;
                ele="\n"+ele;
            }
            else if(j%2==0&&ele=="{")
            {
                ele+="\n";
                k++;     
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(j%2==0&&ele==",")
            {
                ele+="\n";
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(ele=="\"") j++;
            res+=ele;        
        }
    　　document.getElementById('output_value').value = res;
　　}


	
	var json=eval('(' + text_value + ')');
	var html="";
	html=formatObject("JSON",json,"aa");
	document.getElementById('myObj').innerHTML=html;
	//class属性删除close 添加open

	var	obj_class=document.getElementById('myObj').firstChild.className;
	var blank = (obj_class != '') ? ' ' : '';
	var added = obj_class + blank + 'open';
	var removed =added.replace('close', '');
	removed = removed.replace(/(^\s+)|(\s+$)/g, '');
	document.getElementById('myObj').firstChild.className=removed;

}
	function openOrClose(o){
		var div =$(o).nextAll("div");
		if(div.hasClass("close")){
			$(o).html($(o).html().replace("+","-"));
			div.removeClass("close");
			div.addClass("open");
		}else{
			$(o).html($(o).html().replace("-","+"));
			div.removeClass("open");
			div.addClass("close");
		}
				
	}
	 
</script>
<script th:src="@{/js/jquery.min.js}"></script>
</html>
